<template>
	<div class="detail">
		<top show='true' back='true' title='详情'></top>
		<div class="detail-top">
			<div class="detail-top-l">
				<div class="top-img">
					<img class="head-img" :src="detailData.head_portrait" />
				</div>
				<div class="top-des">
					<div class="des-t">
						<span>{{detailData.nick_name}}</span>
						<span>{{detailData.distance_str}}</span>
					</div>
					<div class="des-b">
						<img v-if="detailData.sex=='女'" class="des-woman" src="../static/img/woman.png" />
						<img v-if="detailData.sex=='男'" class="des-woman" src="../static/img/man.png" />
						<span>{{detailData.age}}</span>
						<span>|</span>
						<span>{{detailData.birthday}}</span>
					</div>
				</div>
			</div>
			<div class="detail-top-r" v-if="detailData.follow==0" :data-follw='0' :data-id='detailData.user_id' @click="follw">
				+关注
			</div>
			<div class="detail-top-r2" v-if="detailData.follow==1" :data-follw='1' :data-id='detailData.user_id' @click="follw">
				已关注
			</div>
		</div>
		<!-- content -->
		<div class="detail-content">
			<p>{{detailData.content}}</p>
			<img v-if="detailData.video==''" :src="detailData.img[0].url" />
			<video v-if="detailData.video!=''" controls="controls" :src="detailData.video"></video>
		</div>
		<img style="width: 100%;height: auto;display: block;" src="../static/img/bottom.png" />
		<!-- remark -->
		<div class="remark">
			<div class="remark-title">评论（{{detailData.discuss_count}}）</div>
			<div class="remark-list">
				<ul>
					<li v-for="(item,index) in detailData.discuss">
						<div class="remark-head">
							<div class="remark-head-l">
								<img :src="item.head_portrait" />
								<span>{{item.nick_name}}</span>
							</div>
							<div class="remark-head-r">
								{{item.create_time_str}}
							</div>
						</div>
						<div class="remark-content">
							<div class="remark-txt" @click="discuss(item)">
								{{item.content}}
							</div>
							<div class="reply" v-for="(i,index2) in item.children">
								<div class="reply-l">

								</div>
								<div class="reply-r">
									<p>{{i.nick_name}}回复{{i.right_nick_name}}</p>
									<p @click="reply(i)">{{i.content}}</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 回复评论 -->
		<div class="comment">
			<div class="comment-l">
				<input @blur="comment" :placeholder="placeholer" />
			</div>
			<div class="comment-r">
				<ul>
					<li class="zan">
						<img src="../static/img/zanGray.png" />
						<span>378</span>
					</li>
					<li class="gift">
						<img src="../static/img/gift.png" />
						<span>42</span>
					</li>
					<li class="share">
						<img src="../static/img/share.png" />
						<span>1234</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import top from '@/components/top.vue';
	import modal from '../routeUrl.js';
	import globaldata from '../globaldata.js';
	export default {
		components: {
			top
		},
		data() {
			return {
				detailData: {},
				commentInfo: '',
				placeholer: '评论一下吧~',
				commentType: 0,
				trend_id: null,
				discuss_or_reply_id: null,
				discuss_user_id: null
			}
		},
		created() {
			console.log(this.$route.query)
			this.detail()

		},
		methods: {
			detail() {
				let parms = {
					longitude: '120.384205',
					latitude: '36.073204',
					my_user_id: globaldata.t_id,
					user_id: this.$route.query.data.userid,
					trend_id: this.$route.query.data.id
				}
				modal.trendsDetails(parms).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.detailData = res.data
					}

				})
			},
			follw(e) {
				console.log(e.target.dataset)
				let parms = {

					t_id: globaldata.t_id,
					follow: e.target.dataset.follw,
					object_id: e.target.dataset.id
				}
				modal.follow(parms).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.detail()
					} else {
						alert("关注失败")
					}

				})
			},
			comment(e) {
				console.log(e.target.value)
				this.commentInfo = e.target.value;
				if (this.commentType == 0) {
					let parms = {
						type: 0,
						t_id: globaldata.t_id,
						trend_id: this.detailData.id,
						content: e.target.value
					}
					modal.discuss(parms).then(res => {
						console.log(res)
						if (res.code == 1) {
							this.detail()
						} else {
							alert("关注失败")
						}

					})
				} else {
					let parms = {
						type: 0,
						t_id: globaldata.t_id,
						trend_id: this.detailData.id,
						discuss_or_reply_id: this.discuss_or_reply_id,
						discuss_user_id: this.discuss_user_id,
						content: e.target.value
					}
					modal.reply(parms).then(res => {
						console.log(res)
						if (res.code == 1) {
							this.detail()
						} else {
							alert("关注失败")
						}

					})
				}
			},
			discuss(item) {
				this.commentType = 0;
				this.trend_id = item.user_id;
				this.placeholer = '回复' + item.nick_name
			},
			reply(i) {
				this.commentType = 1;
				this.discuss_or_reply_id = i.discuss_id;
				this.discuss_user_id = i.user_id;
				this.placeholer = '回复' + i.nick_name
			}
		}
	}
</script>

<style lang="scss" rel="stylesheet/scss">
	@import '../assets/scss/main.scss';

	.comment {
		width: 100%;
		display: flex;
		display: -webkit-flex;
		align-items: center;
		padding: px2vw(8) px2vw(15);
		box-sizing: border-box;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.comment-l {
		flex: 1;
		padding: 0 px2vw(15);
		box-sizing: border-box;

		input {
			width: 100%;
			height: px2vw(35);
			background: #F6F6F6;
			border-radius: px2vw(35);
			padding: 0 px2vw(10);
			box-sizing: border-box;
		}
	}

	.zan img {
		display: block;
		width: px2vw(16);
		height: px2vw(17);
	}

	.gift img {
		display: block;
		width: px2vw(19);
		height: px2vw(17);
	}

	.share img {
		display: block;
		width: px2vw(17);
		height: px2vw(17);
	}

	.comment-r ul {
		display: flex;
		display: -webkit-flex;
		align-items: center;

	}

	.comment-r ul li {
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		align-items: center;
		margin-right: px2vw(21);

		span {
			font-size: px2vw(10);
		}
	}

	.comment-r ul li:last-child {
		margin-right: 0;
	}

	.reply {
		display: flex;
		display: -webkit-flex;
		margin-top: px2vw(17);
	}

	.remark-list {

		margin-top: px2vw(17);
		box-sizing: border-box;
		padding-bottom: px2vw(40);
	}

	.remark-list ul li {
		margin-top: px2vw(20);
		padding-bottom: px2vw(15);
		border-bottom: 1px solid #E0E0E0;
	}

	.remark-content {
		margin-top: px2vw(5);
	}

	.remark {
		padding: 0 px2vw(20);
		box-sizing: border-box;
		margin-top: px2vw(15);
	}

	.remark-txt {
		font-size: px2vw(14);
	}

	.reply-r {
		padding-left: px2vw(7);
		box-sizing: border-box;

	}

	.reply-r p:last-child {
		font-size: px2vw(12);
	}

	.reply-r p:first-child {
		color: #737981;
		font-size: px2vw(11);
	}

	.reply-l {
		width: px2vw(5);
		background: #63C0B9;
	}

	.des-woman {
		display: block;
		width: px2vw(8);
		height: px2vw(10);
	}

	.remark-head {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
	}

	.remark-head-l {
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.remark-head-l img {
		width: px2vw(30);
		height: px2vw(30);
		display: block;
		border-radius: 50%;
		margin-right: px2vw(8);
	}

	.remark-head-l span {
		display: inline-block;
		font-size: px2vw(15);
	}

	.remark-head-r {
		font-size: px2vw(11);
		color: #737981;
	}

	.remark-title {
		font-size: px2vw(15);
		font-weight: bold;
	}

	.detail-content {
		padding: px2vw(12) px2vw(20) px2vw(5) px2vw(20);
		box-sizing: border-box;
		background: #fff;
	}

	.detail-content p {
		font-size: px2vw(14);
		font-weight: 500;
		line-height: px2vw(21);
	}

	.detail-content img,
	.detail-content video {
		width: 100%;
		height: px2vw(187);
		display: block;
		border-radius: 20px;
		margin-top: px2vw(8);
	}

	.detail-top {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
		padding: px2vw(9) px2vw(17);
		box-sizing: border-box;
		border-bottom: 1px dashed #E8EBF1;
		background: #fff;
	}

	.des-t {
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.top-des {
		margin-left: px2vw(8);
	}

	.des-b {
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.des-b span {
		display: inline-block;
		color: #737981;
		font-size: px2vw(11);

		margin-left: px2vw(5);
	}

	.head-img {
		width: px2vw(40);
		height: px2vw(40);
		display: block;
		border-radius: 50%;
	}

	.detail-top-l {
		display: flex;
		display: -webkit-flex;
		align-items: center;

	}

	.detail-top-r {
		width: px2vw(60);
		height: px2vw(25);
		border-radius: 50px;
		text-align: center;
		line-height: px2vw(25);
		background: #74CCC5;
		color: #FFFFFF;
		font-size: px2vw(12);
	}

	.detail-top-r2 {
		width: px2vw(60);
		height: px2vw(25);
		border-radius: 50px;
		text-align: center;
		line-height: px2vw(25);

		color: #74CCC5;
		font-size: px2vw(12);
		border: 1px solid #74CCC5;
	}

	.des-t span {
		display: inline-block;

	}

	.des-t span:first-child {
		font-size: px2vw(15);
		font-weight: bold;
	}

	.des-t span:last-child {
		height: px2vw(14);
		font-size: px2vw(10);
		line-height: px2vw(14);
		padding: 0px px2vw(5);
		border-radius: 27px;
		background: #FB5492;
		color: #FFFFFF;
		margin-left: px2vw(5);
	}
</style>
